/* src/styles/Overlay.css */

/* This div exists within the #dashboard-root portal element. */
.dashboard-overlay-container {
}

/* --- Theme Variables --- */
/* Default (Dark Theme) */
:root,
.theme-dark {
    --sidebar-bg: #282c34;
    --sidebar-text: #abb2bf;
    --sidebar-header-color: #61dafb;
    --sidebar-border: #3a3f47;
    --sidebar-shadow: rgba(0, 0, 0, 0.5);
    --section-bg: #3a3f47;
    --item-border: #5a606b;
    --input-bg: #454b54;
    --input-text: #abb2bf;
    --input-border: #5a606b;
    --button-bg: #61dafb;
    --button-text: #282c34;
    --button-hover-bg: #a4d9f5;
    --pre-bg: #3a3f47;
    --pre-text: #abb2bf;

    /* Tooltip variables */
    --tooltip-bg: #5a606b;
    --tooltip-text: #abb2bf;
    --tooltip-border: #7a808b;

    /* Theme Toggle Icon Colors */
    --icon-sun-color: #f39c12;
    --icon-moon-color: #f1c40f;

    /* Slider specific variables */
    --slider-track-color: var(--input-bg);
    --slider-thumb-color: var(--sidebar-header-color);

    /* Notification specific */
    --notification-progress-bg: #5a606b;
    --notification-progress-fill: var(--sidebar-header-color);
    --notification-success-color: #2ecc71;
    --notification-error-color: #e74c3c;
    --notification-shadow: rgba(0, 0, 0, 0.3);
    --notification-close-hover-bg: rgba(255, 255, 255, 0.1);
}

/* Light Theme */
.theme-light {
    --sidebar-bg: #ffffff;
    --sidebar-text: #333;
    --sidebar-header-color: #0056b3;
    --sidebar-border: #e9e9e9;
    --sidebar-shadow: rgba(0, 0, 0, 0.2);
    --section-bg: #f4f4f4;
    --item-border: #ddd;
    --input-bg: #ffffff;
    --input-text: #333;
    --input-border: #ccc;
    --button-bg: #007bff;
    --button-text: #ffffff;
    --button-hover-bg: #0056b3;
    --pre-bg: #e9e9e9;
    --pre-text: #333;

    /* Tooltip variables */
    --tooltip-bg: #333;
    --tooltip-text: #ffffff;
    --tooltip-border: #555;

    /* Slider specific variables */
    --slider-track-color: var(--item-border);
    --slider-thumb-color: var(--sidebar-header-color);

    /* Notification specific */
    --notification-progress-bg: #e0e0e0;
    --notification-progress-fill: var(--sidebar-header-color);
    --notification-success-color: #27ae60;
    --notification-error-color: #c0392b;
    --notification-shadow: rgba(0, 0, 0, 0.15);
    --notification-close-hover-bg: rgba(0, 0, 0, 0.08);
}

/* --- Sidebar General Styles --- */
/* Styles for the main sidebar container. */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: calc(var(--vh, 1vh) * 100);
  background-color: var(--sidebar-bg);
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-color 0.3s ease, color 0.3s ease;
  z-index: 1010;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
  color: var(--sidebar-text);
  font-family: sans-serif;
  font-size: 14px;
}

/* State when the sidebar is open. */
.sidebar.is-open {
  transform: translateX(0);
  box-shadow: 2px 0 5px var(--sidebar-shadow);
}

/* --- Sidebar Header --- */
/* Styles for the header section of the sidebar. */
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--sidebar-border);
}

/* Container for header control buttons like theme toggle and fullscreen. */
.header-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Generic action button style within the header. */
.header-action-button {
    background: none;
    border: none;
    padding: 4px;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sidebar-text);
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.header-action-button:hover {
    background-color: rgba(128, 128, 128, 0.2);
}

.header-action-button.active {
    background-color: var(--sidebar-header-color);
    color: var(--button-text);
}

.header-action-button svg {
    fill: currentColor;
    display: block;
}

/* Sidebar main title. */
.sidebar h2 {
    margin: 0;
    font-size: 1.5em;
    color: var(--sidebar-header-color);
}

/* Sidebar section titles. */
.sidebar h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.2em;
    color: var(--sidebar-header-color);
}

/* --- Theme Toggle Button --- */
/* Styles for the theme toggle switch.
   Position is relative for absolutely positioned icons.
   Padding provides space for icons. Box-sizing includes padding in dimensions.
   Overflow hidden clips icons during transition. */
.theme-toggle {
    width: 40px;
    height: 20px;
    border-radius: 10px;
    background-color: var(--item-border);
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    padding: 0 2px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Styles for the sun/moon icons within the theme toggle.
   Vertically centers the 16px icon in the 20px toggle height. */
.theme-toggle .icon {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Ensures SVG parts (path, circle) use the 'color' property
   set on .moon-icon/.sun-icon via currentColor. */
.theme-toggle .icon path,
.theme-toggle .icon circle {
    fill: currentColor;
}

/* Styles SVG lines, primarily for the sun icon's rays.
   Adjust stroke-width if rays are too thick/thin. */
.theme-toggle .icon line {
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Initial position for moon icon (visible in dark mode).
   Positioned from the left edge of the toggle's padding box.
   Color var sets 'currentColor' for the moon SVG. */
.theme-toggle .moon-icon {
    left: 2px;
    opacity: 1;
    transform: translateX(0);
    color: var(--icon-moon-color);
}

/* Initial position for sun icon (hidden in dark mode).
   Starts at the same position as moon, then moved right by its own width.
   Color var sets 'currentColor' for the sun SVG. */
.theme-toggle .sun-icon {
    left: 2px;
    opacity: 0;
    transform: translateX(100%);
    color: var(--icon-sun-color);
}

/* State when the toggle is in light mode (when .theme-toggle has .light class).
   Moon moves from 2px to 18px (2px + 16px) and fades out. */
.theme-toggle.light .moon-icon {
    opacity: 0;
    transform: translateX(100%);
}

/* Sun icon becomes visible, positioned from the right edge.
   Transform ensures it's at its defined 'right: 2px' position. */
.theme-toggle.light .sun-icon {
    opacity: 1;
    left: auto;
    right: 2px;
    transform: translateX(0);
}

/* --- Sidebar Action Buttons (e.g., for Apps, Files) --- */
/* Container for main action buttons like "Open Apps", "Open Files".
   Distributes buttons evenly. Adds space and a separator. */
.sidebar-action-buttons {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 20px;
    padding: 10px 0;
    border-bottom: 1px solid var(--sidebar-border);
}

/* Individual action button style.
   Centers icon, square-ish, default OFF background. */
.action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--item-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--sidebar-text);
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
    outline: none;
}

/* SVG icon within an action button.
   Controlled by parent's color, adjusts size, prevents SVG click capture. */
.action-button svg {
    fill: currentColor;
    width: 60%;
    height: 60%;
    pointer-events: none;
}

/* Hover state for action buttons. Highlights border, changes background. */
.action-button:hover {
    border-color: var(--sidebar-header-color);
    background-color: var(--section-bg);
}

/* Active state for action buttons (e.g., when a modal is open).
   Uses ON background color and contrasting icon color. */
.action-button.active {
    background-color: var(--sidebar-header-color);
    color: var(--button-text);
    border-color: var(--sidebar-header-color);
}

/* Hover state for active action buttons. Uses button hover color. */
.action-button.active:hover {
     background-color: var(--button-hover-bg);
     border-color: var(--button-hover-bg);
}

/* --- Collapsible Sidebar Sections --- */
/* General styling for a collapsible section in the sidebar. */
.sidebar-section {
    margin-bottom: 10px;
    padding: 0;
    border-radius: 8px;
    background-color: var(--section-bg);
    border: 1px solid var(--item-border);
    overflow: hidden;
}

/* Header part of a collapsible section.
   Clickable to toggle, prevents text selection. */
.sidebar-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

/* Subtle hover effect for section headers. */
.sidebar-section-header:hover {
    background-color: rgba(128, 128, 128, 0.1);
}

/* Title within the section header. Removes default h3 margins. */
.sidebar-section-header h3 {
    margin: 0;
    font-size: 1.2em;
    color: var(--sidebar-header-color);
}

/* Toggle icon (e.g., caret) for collapsible sections.
   Aligns SVG, matches text color, adds space from title. */
.section-toggle-icon {
    display: flex;
    align-items: center;
    color: var(--sidebar-text);
    margin-left: 10px;
}

/* Content area of a collapsible section.
   Padded, with extra space below the header. */
.sidebar-section-content {
    padding: 15px;
    padding-top: 10px;
}

/* --- Settings Items within Sections --- */
/* Styling for individual setting items (e.g., label + input). */
.dev-setting-item {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
/* Ensure setting items within collapsible sections have transparent background. */
.sidebar-section-content .dev-setting-item {
    background-color: transparent;
}

/* Common style for labels of settings and gauges. */
.dev-setting-item label,
.gauge-label {
    font-weight: bold;
    font-size: 0.9em;
    color: var(--sidebar-text);
}

/* Style for select elements like #encoderSelect.
   Custom arrow SVG for dark theme. */
.dev-setting-item #encoderSelect,
.dev-setting-item #resolutionPresetSelect,
.dev-setting-item #uiScalingSelect,
.dev-setting-item .audio-device-select {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--input-text);
    font-size: 1em;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23abb2bf%22%20d%3D%22M287%2C114.7L159.1%2C282.6c-3.2%2C3.2-8.3%2C3.2-11.6%2C0L5.5%2C114.7c-3.2-3.2-3.2-8.3%2C0-11.6l10.3-10.3c3.2-3.2%2C8.3-3.2%2C11.6%2C0l124.9%2C124.9l124.9-124.9c3.2-3.2%2C8.3-3.2%2C11.6%2C0l10.3%2C10.3C290.3%2C106.5%2C290.3%2C111.5%2C287%2C114.7z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 8px top 50%;
    background-size: 12px auto;
    transition: border-color 0.2s ease;
}

/* Custom arrow SVG for light theme select elements. */
.theme-light .dev-setting-item #encoderSelect,
.theme-light .dev-setting-item #resolutionPresetSelect,
.theme-light .dev-setting-item #uiScalingSelect,
.theme-light .dev-setting-item .audio-device-select {
     background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2C114.7L159.1%2C282.6c-3.2%2C3.2-8.3%2C3.2-11.6%2C0L5.5%2C114.7c-3.2-3.2-3.2-8.3%2C0-11.6l10.3-10.3c3.2-3.2%2C8.3-3.2%2C11.6%2C0l124.9%2C124.9l124.9-124.9c3.2-3.2%2C8.3-3.2%2C11.6%2C0l10.3%2C10.3C290.3%2C106.5%2C290.3%2C111.5%2C287%2C114.7z%22%2F%3E%3C%2Fsvg%3E');
     background-color: var(--input-bg);
     color: var(--input-text);
}

/* Hover state for select elements. */
.dev-setting-item #encoderSelect:hover,
.dev-setting-item #resolutionPresetSelect:hover,
.theme-light .dev-setting-item #uiScalingSelect,
.dev-setting-item .audio-device-select:hover {
    border-color: var(--sidebar-header-color);
}

/* Focus state for select elements. */
.dev-setting-item #encoderSelect:focus,
.dev-setting-item #resolutionPresetSelect:focus,
.dev-setting-item #uiScalingSelect:focus,
.dev-setting-item .audio-device-select:focus {
   outline: none;
   border-color: var(--sidebar-header-color);
   box-shadow: none;
}

/* Disabled state for audio device select elements. */
.dev-setting-item .audio-device-select:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* --- Slider Specific Styles --- */
/* Style for range input elements (sliders). */
.dev-setting-item input[type="range"] {
    flex-grow: 1;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
    height: 20px;
}

/* Remove focus outline for sliders. */
.dev-setting-item input[type="range"]:focus {
    outline: none;
}

/* Slider track style for Webkit browsers. */
.dev-setting-item input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    background: var(--slider-track-color);
    border-radius: 4px;
    transition: background 0.3s ease;
}

/* Slider thumb style for Webkit browsers. */
.dev-setting-item input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -4px;
    width: 16px;
    height: 16px;
    background: var(--slider-thumb-color);
    border: 1px solid var(--item-border);
    border-radius: 50%;
    transition: background 0.3s ease, box-shadow 0.1s ease;
}

.dev-setting-item input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow: 0 0 4px rgba(var(--sidebar-header-color), 0.5);
}

/* Slider track style for Mozilla Firefox. */
.dev-setting-item input[type="range"]::-moz-range-track {
    width: 100%;
    height: 8px;
    background: var(--slider-track-color);
    border-radius: 4px;
    transition: background 0.3s ease;
}

/* Slider thumb style for Mozilla Firefox. */
.dev-setting-item input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--slider-thumb-color);
    border: 1px solid var(--item-border);
    border-radius: 50%;
    transition: background 0.3s ease, box-shadow 0.1s ease;
}

.dev-setting-item input[type="range"]::-moz-range-thumb:hover {
     box-shadow: 0 0 4px rgba(var(--sidebar-header-color), 0.5);
}

/* --- Gauge Specific Styles --- */
/* Container for grouping multiple gauges. */
.stats-gauges {
    display: flex;
    justify-content: space-around;
    margin-bottom: 0px;
    flex-wrap: wrap;
    color: var(--sidebar-text);
    padding: 5px 0;
}
/* Ensure gauges within collapsible sections have transparent background. */
.sidebar-section-content .stats-gauges {
    background-color: transparent;
    padding: 5px 0 0 0;
    margin-bottom: 0;
}

/* Individual gauge container (SVG + Label). */
.gauge-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 5px 5px;
    min-width: 80px;
    text-align: center;
    cursor: help;
}

/* Style for the SVG text element inside the gauge. */
.gauge-container svg text {
   fill: var(--sidebar-text);
   pointer-events: none;
}

/* Style for the label displayed below the gauge. */
.gauge-label {
    margin-top: 5px;
    font-weight: bold;
    color: var(--sidebar-text);
    text-align: center;
    font-size: 0.9em;
    pointer-events: none;
}

/* --- Tooltip Styles --- */
/* Styles for tooltips, e.g., for gauges. */
.gauge-tooltip {
    position: fixed;
    padding: 8px 12px;
    background-color: var(--tooltip-bg);
    color: var(--tooltip-text);
    border: 1px solid var(--tooltip-border);
    border-radius: 4px;
    font-size: 0.9em;
    z-index: 1030;
    pointer-events: none;
    white-space: nowrap;
    transform: translate(-50%, -100%);
}

/* --- Sidebar Toggle Handle --- */
/* Styles for the handle to open/close the sidebar. */
.toggle-handle {
  position: fixed;
  top: 50%;
  left: 0;
  width: 15px;
  height: 60px;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 1020;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Visual indicator for the toggle handle. */
.toggle-indicator {
    width: 5px;
    height: 40px;
    background-color: var(--sidebar-header-color);
    border-radius: 3px;
}

/* --- Global and Root Styles --- */
/* Basic body styling to prevent horizontal scrollbar. */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: var(--sidebar-bg);
  color: var(--sidebar-text);
}

/* Apply theme variables to the root dashboard element for general page styles. */
#dashboard-root.theme-dark {
}
#dashboard-root.theme-light {
}

/* Ensure the #dashboard-root portal element has a high z-index. */
#dashboard-root {
    z-index: 1000;
}

/* --- Clipboard Section Styles --- */
/* Container for the clipboard label and textarea.
   Consistent spacing, inherits section background. */
.dashboard-clipboard-item {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background-color: transparent;
}

/* Label for the clipboard textarea, matches other labels. */
.dashboard-clipboard-item label {
    font-weight: bold;
    font-size: 0.9em;
    color: var(--sidebar-text);
}

/* The clipboard textarea itself.
   Includes padding/border in width, consistent styling, vertical resize. */
.dashboard-clipboard-item textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--input-text);
    font-size: 0.9em;
    font-family: monospace;
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

/* Hover state for the textarea, highlights border. */
.dashboard-clipboard-item textarea:hover {
    border-color: var(--sidebar-header-color);
}

/* Focus state for the textarea, removes outline, highlights border. */
.dashboard-clipboard-item textarea:focus {
   outline: none;
   border-color: var(--sidebar-header-color);
}

/* Placeholder text styling for the textarea. */
.dashboard-clipboard-item textarea::placeholder {
    color: var(--sidebar-text);
    opacity: 0.6;
}

/* Specific placeholder styles for light theme if needed. */
.theme-light .dashboard-clipboard-item textarea::placeholder {
    color: var(--sidebar-text);
    opacity: 0.6;
}

/* --- Gamepad Visualizer Styles --- */
/* Container for a single gamepad visualizer instance.
   Adds space and a separator between multiple gamepads. */
.gamepad-visualizer-instance {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed var(--item-border);
}
/* Removes bottom margin/border for the last gamepad instance. */
.gamepad-visualizer-instance:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Title for a gamepad visualizer instance. */
.gamepad-visualizer-instance h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1em;
    color: var(--sidebar-text);
    font-weight: normal;
}

/* The main SVG container for gamepad visualization.
   Uses input background for contrast, prevents extra space below. */
.gamepad-svg-vis {
    background-color: var(--input-bg);
    border-radius: 5px;
    display: block;
    border: 1px solid var(--item-border);
}

/* Base style for SVG elements in gamepad visualizer. */
.gp-vis-base {
    fill: #555;
    stroke: #888;
    stroke-width: 0.5;
}
/* Style for buttons, d-pad, bumpers in gamepad visualizer. */
.gp-vis-button,
.gp-vis-dpad,
.gp-vis-bumper {
    fill: #8ecae6;
    stroke: #a1d8f0;
    stroke-width: 0.5;
    transition: fill 0.05s linear;
}
/* Style for the base of analog sticks. */
.gp-vis-stick-base {
    fill: #2a527a;
}
/* Style for the top part of analog sticks. */
.gp-vis-stick-top {
    fill: #6699cc;
    stroke: #8cb3d9;
    stroke-width: 0.5;
    transition: transform 0.05s linear;
}
/* Style for triggers, default low opacity. */
.gp-vis-trigger {
    fill: #8ecae6;
    stroke: #a1d8f0;
    stroke-width: 0.5;
    transition: opacity 0.05s linear;
    opacity: 0.5;
}

/* Pressed states for gamepad buttons, d-pad, bumpers. Uses active color. */
.gp-vis-button-pressed,
.gp-vis-dpad-pressed,
.gp-vis-bumper-pressed {
    fill: #4a90e2;
}

/* Message displayed when no gamepads are detected. */
.no-gamepads-message {
    font-style: italic;
    color: var(--sidebar-text);
    opacity: 0.7;
    text-align: center;
    margin-top: 10px;
}

/* --- Resolution and Audio Settings --- */
/* Container for manual width/height inputs.
   Provides space between inputs and below the container. */
.resolution-manual-inputs {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

/* Individual manual input item (label + input).
   Each takes half the space, removes bottom margin. */
.manual-input-item {
    flex: 1;
    margin-bottom: 0;
}

/* Manual width/height number inputs.
   Removes spinners in Firefox. */
.manual-input-item input[type="number"] {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--input-text);
    font-size: 1em;
    box-sizing: border-box;
    -moz-appearance: textfield;
}

/* Remove spinners for number input in Webkit browsers. */
.manual-input-item input[type="number"]::-webkit-outer-spin-button,
.manual-input-item input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hover state for number inputs. */
.manual-input-item input[type="number"]:hover {
    border-color: var(--sidebar-header-color);
}
/* Focus state for number inputs. */
.manual-input-item input[type="number"]:focus {
    outline: none;
    border-color: var(--sidebar-header-color);
}

/* Container for "Scale Locally" checkbox and label.
   Provides space between checkbox and label. */
.scale-locally-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
}

/* "Scale Locally" checkbox.
   Colors the checkbox, resets margin. */
.scale-locally-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--sidebar-header-color);
    cursor: pointer;
    margin: 0;
}

/* Label for "Scale Locally" checkbox.
   Less prominent, allows clicking label to toggle, resets margin. */
.scale-locally-item label {
    font-weight: normal;
    font-size: 0.9em;
    cursor: pointer;
    margin: 0;
}

/* Container for resolution action buttons (Set/Reset).
   Provides space between buttons and above the container. */
.resolution-action-buttons {
    display: flex;
    gap: 10px;
    margin-top: 5px;
}

/* Styling for Set/Reset buttons in resolution settings. */
.resolution-button {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid var(--item-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--sidebar-text);
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.resolution-button:hover {
    background-color: var(--section-bg);
    border-color: var(--sidebar-header-color);
}

/* Divider style used in Audio Settings. */
.section-divider {
    border: none;
    border-top: 1px solid var(--item-border);
    margin: 15px 0;
}

/* Error message style used in Audio Settings. */
.error-message {
    color: var(--error-color, #e74c3c);
    background-color: rgba(231, 76, 60, 0.1);
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 0.9em;
    border: 1px solid rgba(231, 76, 60, 0.3);
}

/* Notice style used in Audio Settings (e.g., device support). */
.device-support-notice {
    font-size: 0.8em;
    color: var(--sidebar-text-secondary, #888);
    margin-top: 5px;
    margin-bottom: 0;
    text-align: center;
}

/* --- Toggle Buttons (e.g., Mic Mute, Audio Mute) --- */
/* Generic toggle button style, inherits from .resolution-button. */
.toggle-button {
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
    background-color: var(--input-bg);
    color: var(--sidebar-text);
    border-color: var(--item-border);
}

/* Hover state for toggle buttons, slightly more prominent. */
.toggle-button:hover {
    border-color: var(--sidebar-header-color);
    background-color: var(--section-bg);
}

/* Active state for toggle buttons (e.g., when muted).
   Uses highlight color and contrast text. */
.toggle-button.active {
    background-color: var(--sidebar-header-color);
    color: var(--button-text);
    border-color: var(--sidebar-header-color);
}

/* Hover state when toggle button is active. Uses theme's button hover. */
.toggle-button.active:hover {
     background-color: var(--button-hover-bg);
     border-color: var(--button-hover-bg);
}

/* --- Notifications --- */
/* Container for all notification items.
   Positioned top-right, high z-index, allows clicks to pass through container itself. */
.notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 320px;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

/* Individual notification item.
   Re-enables pointer events, prevents content overflow.
   Transition matches FADE_DURATION if applicable from JS. */
.notification-item {
    background-color: var(--section-bg);
    color: var(--sidebar-text);
    border: 1px solid var(--item-border);
    border-radius: 8px;
    padding: 10px 15px;
    box-shadow: 0 2px 10px var(--notification-shadow);
    opacity: 1;
    transition: opacity 0.5s ease-out, transform 0.3s ease-out;
    transform: translateX(0);
    pointer-events: auto;
    overflow: hidden;
}

/* Style for fading out notification, optional slide-out effect. */
.notification-item.fade-out {
    opacity: 0;
    transform: translateX(20px);
}

/* Header of a notification item (filename, close button). */
.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

/* Filename display in notification, truncates long names.
   Provides space before close button. */
.notification-filename {
    font-weight: bold;
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    margin-right: 10px;
}

/* Close button for notifications.
   Makes clickable area slightly larger. */
.notification-close-button {
    background: none;
    border: none;
    color: var(--sidebar-text);
    font-size: 1.2em;
    line-height: 1;
    padding: 2px 5px;
    margin: -2px -5px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    border-radius: 4px;
}

.notification-close-button:hover {
    opacity: 1;
    background-color: var(--notification-close-hover-bg);
}

/* Body of a notification item (status text, progress bar). */
.notification-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Status text within notification. */
.notification-status-text {
    font-size: 0.85em;
    opacity: 0.9;
}

/* Outer container for the progress bar. */
.notification-progress-bar-outer {
    width: 100%;
    height: 6px;
    background-color: var(--notification-progress-bg);
    border-radius: 3px;
    overflow: hidden;
}

/* Inner fill of the progress bar.
   Starts at 0% width, smooth progress updates. */
.notification-progress-bar-inner {
    height: 100%;
    width: 0%;
    background-color: var(--notification-progress-fill);
    border-radius: 3px;
    transition: width 0.1s linear;
}

/* Success state for notification progress bar. */
.notification-item.end .notification-progress-bar-inner {
    background-color: var(--notification-success-color);
}

/* Error state for notification progress bar. */
.notification-item.error .notification-progress-bar-inner {
    background-color: var(--notification-error-color);
}

/* Error status text styling. */
.notification-item.error .notification-status-text.error-text {
    color: var(--notification-error-color);
    font-weight: bold;
}

/* Detailed error message in notification. Wraps long messages. */
.notification-error-message {
    font-size: 0.8em;
    color: var(--notification-error-color);
    margin: 5px 0 0 0;
    padding: 0;
    word-break: break-word;
}

/* --- Global Link Styles --- */
/* Basic link styling to remove default underlines. */
a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}

/* --- Files Modal Styles --- */
/* Styles for the file browser modal.
   Rounded corners, positioned above sidebar/notifications. */
.files-modal {
    position: fixed;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    background-color: var(--sidebar-bg);
    border: 1px solid var(--sidebar-border);
    border-radius: 15px;
    box-shadow: 0 5px 15px var(--sidebar-shadow);
    z-index: 1060;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Close button for the files modal.
   Positioned relative to modal padding, ensures it's above iframe. */
.files-modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 2rem;
    font-weight: bold;
    color: var(--sidebar-text);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    z-index: 1061;
}

.files-modal-close:hover {
    color: var(--sidebar-header-color);
}

/* Iframe within the files modal.
   Fills available space, no border, rounded corners for content area. */
.files-modal iframe {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px;
    background-color: var(--input-bg);
}

/* --- Virtual Keyboard Button --- */
/* Styles for the floating virtual keyboard button.
   Uses theme variables, consistent styling, positioned above most elements. */
.virtual-keyboard-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: var(--button-bg);
  color: var(--button-text);
  border: 1px solid var(--item-border);
  border-radius: 8px;
  box-shadow: 0 2px 8px var(--sidebar-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1040;
  padding: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

/* Hover state for virtual keyboard button.
   Uses theme hover, highlights border, slight lift effect. */
.virtual-keyboard-button:hover {
  background-color: var(--button-hover-bg);
  border-color: var(--sidebar-header-color);
  transform: translateY(-2px);
}

/* Active (pressed) state for virtual keyboard button. Press down effect. */
.virtual-keyboard-button:active {
  transform: translateY(0px) scale(0.98);
}

/* SVG icon within the virtual keyboard button.
   Adjusts size, inherits color from button. */
.virtual-keyboard-button svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* --- Apps Modal Styles --- */
/* Styles for the applications browser modal.
   Centered, responsive dimensions, high z-index, rounded corners.
   Prevents content overflow before scroll is active. */
.apps-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: 80vh;
    max-width: 1000px;
    max-height: 700px;
    background-color: var(--sidebar-bg);
    border: 1px solid var(--sidebar-border);
    border-radius: 15px;
    box-shadow: 0 5px 20px var(--sidebar-shadow);
    z-index: 1070;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Close button for the apps modal. */
.apps-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 2rem;
    font-weight: bold;
    color: var(--sidebar-text);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    z-index: 1071;
}

.apps-modal-close:hover {
    color: var(--sidebar-header-color);
}

/* Content area of the apps modal.
   Padded with space for close button, scrollable. */
.apps-modal-content {
    padding: 20px;
    padding-top: 40px;
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Loading and error states within the apps modal. */
.apps-modal-loading,
.apps-modal-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-grow: 1;
    color: var(--sidebar-text);
}
.apps-modal-loading p {
    margin-top: 10px;
}
.apps-modal-error {
    color: var(--notification-error-color);
}

/* Search bar within the apps modal. */
.apps-search-bar {
    width: 100%;
    padding: 10px 15px;
    margin-bottom: 20px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--input-text);
    font-size: 1em;
    box-sizing: border-box;
}
.apps-search-bar:focus {
    outline: none;
    border-color: var(--sidebar-header-color);
}

/* Grid layout for app cards. */
.apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    align-content: start;
}

/* Individual app card style.
   Clickable, with hover effect, contains icon and name.
   Position relative for badge, min/max height, overflow hidden. */
.app-card {
    background-color: var(--section-bg);
    border: 1px solid var(--item-border);
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
    min-height: 180px;
    max-height: 220px;
    overflow: hidden;
}

.app-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.theme-dark .app-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Icon within an app card. */
.app-card-icon {
    width: 96px;
    height: 96px;
    object-fit: contain;
    margin-bottom: 10px;
    flex-shrink: 0;
}

/* Name display within an app card.
   Handles word break and text overflow. */
.app-card-name {
    font-size: 0.9em;
    color: var(--sidebar-text);
    word-break: break-word;
    margin-top: auto;
    line-height: 1.3;
    max-height: 3.9em;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "Installed" badge on an app card. */
.app-card-installed-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: var(--notification-success-color);
    color: white;
    padding: 2px 6px;
    font-size: 0.7em;
    border-radius: 4px;
    font-weight: bold;
}

/* --- App Detail View (within Apps Modal) --- */
/* Styles for the detailed view of a single app.
   Centered content and text. */
.app-detail-view {
    padding: 10px;
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* "Back" button in app detail view. Positioned to the left. */
.app-detail-back-button {
    align-self: flex-start;
    margin-bottom: 15px;
    background-color: var(--input-bg);
    color: var(--sidebar-text);
    border: 1px solid var(--item-border);
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
}
.app-detail-back-button:hover {
    background-color: var(--section-bg);
    border-color: var(--sidebar-header-color);
}

/* Icon in app detail view. Optional rounded corners for square icons. */
.app-detail-icon {
    width: 128px;
    height: 128px;
    object-fit: contain;
    margin-bottom: 15px;
    border-radius: 8px;
}

/* Title (app name) in app detail view. */
.app-detail-view h2 {
    color: var(--sidebar-header-color);
    margin-top: 0;
    margin-bottom: 10px;
}

/* Description text in app detail view.
   Prevents description from becoming too wide. */
.app-detail-description {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 600px;
}

/* Container for action buttons (Install, Update, Remove) in app detail view.
   Centers buttons. */
.app-action-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    justify-content: center;
}

/* Generic style for action buttons in app detail view.
   Ensures buttons have a decent width. */
.app-action-button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s ease;
    min-width: 120px;
}

/* Install button style. */
.app-action-button.install {
    background-color: var(--button-bg);
    color: var(--button-text);
}
.app-action-button.install:hover {
    background-color: var(--button-hover-bg);
}

/* Update button style. */
.app-action-button.update {
    background-color: #f0ad4e;
    color: white;
}
.app-action-button.update:hover {
    background-color: #eea236;
}

/* Remove button style. */
.app-action-button.remove {
    background-color: var(--notification-error-color);
    color: white;
}
.app-action-button.remove:hover {
    background-color: #c9302c;
}

/* --- Spinner Icon Color Fix --- */
/* Ensures spinner icon in loading states uses theme color. */
.apps-modal-loading svg {
    stroke: var(--sidebar-header-color);
}

/* Styles for the main container of an individual sharing link. */
.sharing-link-item {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    border-bottom: 1px solid var(--item-border);
    gap: 5px;
}

/* Adjusts the last sharing link item to remove its bottom border and padding. */
.sharing-link-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Removes top padding for the first sharing link item when it's inside a sidebar section's content. */
.sidebar-section-content > .sharing-link-item:first-child {
    padding-top: 0;
}

/* Styles the label text associated with a sharing link. */
.sharing-link-label {
    font-weight: bold;
    font-size: 0.9em;
    color: var(--sidebar-text);
}

/* Container for action elements, like buttons, related to a sharing link. */
.sharing-link-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* Styles the clickable sharing link URL text. */
.sharing-link {
    color: var(--sidebar-header-color);
    text-decoration: none;
    font-size: 0.85em;
    word-break: break-all;
    flex-grow: 1;
    margin-right: 5px;
}

/* Adds an underline to the sharing link on hover. */
.sharing-link:hover {
    text-decoration: underline;
}

/* Styles for the button used to copy the sharing link. */
.copy-button {
    background: none;
    border: 1px solid var(--item-border);
    color: var(--sidebar-text);
    padding: 5px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Hover state for the copy button, changing background, border, and text/icon color. */
.copy-button:hover {
    background-color: var(--input-bg);
    border-color: var(--sidebar-header-color);
    color: var(--sidebar-header-color);
}

/* Ensures SVG icons inside the copy button inherit the button's current text color. */
.copy-button svg {
    fill: currentColor;
}

/* --- Settings Items within Sections --- */
/* Styling for individual setting items (e.g., label + input).
   Default layout is a column (label above input/control).
   Ensures items within collapsible sections have a transparent background. */
.dev-setting-item {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.sidebar-section-content .dev-setting-item {
    background-color: transparent;
}

/* Common style for labels of settings. */
.dev-setting-item label {
    font-weight: bold;
    font-size: 0.9em;
    color: var(--sidebar-text);
}

/* Specific styling for toggle items (e.g., FullColor 4:4:4).
   Overrides default flex-direction to row.
   Aligns label to the left and toggle switch to the right. */
.dev-setting-item.toggle-item {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

/* Label specific to toggle items.
   Ensures text is left-aligned and has some space before the toggle. */
.dev-setting-item.toggle-item label {
  text-align: left;
  margin-right: 10px;
}

/* Style for select elements like #encoderSelect.
   Custom arrow SVG for dark theme. */
.dev-setting-item #encoderSelect,
.dev-setting-item #resolutionPresetSelect,
.dev-setting-item .audio-device-select {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--input-text);
    font-size: 1em;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23abb2bf%22%20d%3D%22M287%2C114.7L159.1%2C282.6c-3.2%2C3.2-8.3%2C3.2-11.6%2C0L5.5%2C114.7c-3.2-3.2-3.2-8.3%2C0-11.6l10.3-10.3c3.2-3.2%2C8.3-3.2%2C11.6%2C0l124.9%2C124.9l124.9-124.9c3.2-3.2%2C8.3-3.2%2C11.6%2C0l10.3%2C10.3C290.3%2C106.5%2C290.3%2C111.5%2C287%2C114.7z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 8px top 50%;
    background-size: 12px auto;
    transition: border-color 0.2s ease;
}

/* Custom arrow SVG for light theme select elements. */
.theme-light .dev-setting-item #encoderSelect,
.theme-light .dev-setting-item #resolutionPresetSelect,
.theme-light .dev-setting-item .audio-device-select {
     background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2C114.7L159.1%2C282.6c-3.2%2C3.2-8.3%2C3.2-11.6%2C0L5.5%2C114.7c-3.2-3.2-3.2-8.3%2C0-11.6l10.3-10.3c3.2-3.2%2C8.3-3.2%2C11.6%2C0l124.9%2C124.9l124.9-124.9c3.2-3.2%2C8.3-3.2%2C11.6%2C0l10.3%2C10.3C290.3%2C106.5%2C290.3%2C111.5%2C287%2C114.7z%22%2F%3E%3C%2Fsvg%3E');
     background-color: var(--input-bg);
     color: var(--input-text);
}

/* Hover state for select elements. */
.dev-setting-item #encoderSelect:hover,
.dev-setting-item #resolutionPresetSelect:hover,
.dev-setting-item #uiScalingSelect:hover,
.dev-setting-item .audio-device-select:hover {
    border-color: var(--sidebar-header-color);
}

/* Disabled state for audio device select elements. */
.dev-setting-item .audio-device-select:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* --- Slider Specific Styles --- */
/* Style for range input elements (sliders). */
.dev-setting-item input[type="range"] {
    flex-grow: 1;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
    height: 20px;
}

/* Remove focus outline for sliders. */
.dev-setting-item input[type="range"]:focus {
    outline: none;
}

/* Slider track style for Webkit browsers. */
.dev-setting-item input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    background: var(--slider-track-color);
    border-radius: 4px;
    transition: background 0.3s ease;
}

/* Slider thumb style for Webkit browsers. */
.dev-setting-item input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -4px;
    width: 16px;
    height: 16px;
    background: var(--slider-thumb-color);
    border: 1px solid var(--item-border);
    border-radius: 50%;
    transition: background 0.3s ease, box-shadow 0.1s ease;
}

.dev-setting-item input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow: 0 0 4px rgba(var(--sidebar-header-color), 0.5);
}

/* Slider track style for Mozilla Firefox. */
.dev-setting-item input[type="range"]::-moz-range-track {
    width: 100%;
    height: 8px;
    background: var(--slider-track-color);
    border-radius: 4px;
    transition: background 0.3s ease;
}

/* Slider thumb style for Mozilla Firefox. */
.dev-setting-item input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--slider-thumb-color);
    border: 1px solid var(--item-border);
    border-radius: 50%;
    transition: background 0.3s ease, box-shadow 0.1s ease;
}

.dev-setting-item input[type="range"]::-moz-range-thumb:hover {
     box-shadow: 0 0 4px rgba(var(--sidebar-header-color), 0.5);
}

/* --- Toggle Button (Sidebar Specific) --- */
/* Styles for the small toggle switch button used within sidebar settings. */
.toggle-button-sidebar {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
  background-color: var(--item-bg-hover, #555);
  border-radius: 13px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
  border: 1px solid var(--item-border, #444);
  padding: 0;
  box-sizing: border-box;
  flex-shrink: 0;
}

/* Knob part of the toggle switch. */
.toggle-button-sidebar-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.2s ease-in-out;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Active state for the toggle switch (e.g., "ON"). */
.toggle-button-sidebar.active {
  background-color: var(--sidebar-header-color, #61dafb);
}

/* Moves the knob to the right when the toggle is active. */
.toggle-button-sidebar.active .toggle-button-sidebar-knob {
  transform: translateX(24px);
}

/* --- Mobile Key Action Buttons --- */
/* A horizontal rule used as a visual separator. */
.sidebar-section-divider {
    border: 0;
    height: 1px;
    background-color: var(--sidebar-border);
    margin: 0 0 15px 0;
}

/* Container for touch-specific keyboard action buttons. */
.sidebar-mobile-key-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    padding: 5px 0;
    margin-bottom: 20px;
}

/* Base style for individual keyboard action buttons. */
.mobile-key-button {
    flex: 1;
    padding: 8px 4px;
    border: 1px solid var(--item-border);
    border-radius: 6px;
    background-color: var(--input-bg);
    color: var(--sidebar-text);
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* Hover state for keyboard action buttons. */
.mobile-key-button:hover {
    border-color: var(--sidebar-header-color);
    background-color: var(--section-bg);
}

/* Active/toggled state for keyboard action buttons. */
.mobile-key-button.active {
    background-color: var(--sidebar-header-color);
    color: var(--button-text);
    border-color: var(--sidebar-header-color);
}

/* Hover state for active keyboard action buttons. */
.mobile-key-button.active:hover {
     background-color: var(--button-hover-bg);
     border-color: var(--button-hover-bg);
}

/* Modifier for keyboard action buttons containing an SVG icon. */
.mobile-key-button.icon-button {
    padding: 6px;
}

/* SVG styling within an icon-based keyboard action button. */
.mobile-key-button.icon-button svg {
    fill: currentColor;
    width: 18px;
    height: 18px;
    pointer-events: none;
}
